<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Goose Install Link Generator</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>Install Link Generator</h1>
        
        <div class="tabs">
            <button class="tab-btn active" data-tab="form">Form</button>
            <button class="tab-btn" data-tab="json">JSON</button>
        </div>

        <div class="tab-content active" id="form">
            <form id="installForm">
                <div class="form-group">
                    <label for="isBuiltin">Is Built-in</label>
                    <input type="checkbox" id="isBuiltin" name="is_builtin">
                </div>

                <div class="form-group">
                    <label for="id">ID</label>
                    <input type="text" id="id" name="id" required placeholder="Enter extension ID">
                </div>

                <div class="non-builtin">
                    <div class="form-group">
                        <label for="name">Name</label>
                        <input type="text" id="name" name="name" placeholder="Extension name">
                    </div>

                    <div class="form-group">
                        <label for="description">Description</label>
                        <input type="text" id="description" name="description" placeholder="Brief description">
                    </div>

                    <div class="form-group">
                        <label for="command">Command</label>
                        <input type="text" id="command" name="command" placeholder="npx @gooseai/example-extension">
                    </div>

                    <div class="form-group">
                        <label>Environment Variables</label>
                        <div id="envVars"></div>
                        <button type="button" id="addEnvVar">Add Variable</button>
                    </div>
                </div>

                <button type="submit">Generate</button>
            </form>
        </div>

        <div class="tab-content" id="json">
            <div class="form-group">
                <label for="jsonInput">JSON Configuration</label>
                <textarea id="jsonInput" rows="10" placeholder="Paste your JSON configuration here"></textarea>
            </div>
            <button id="generateFromJson">Generate</button>
        </div>

        <div class="result">
            <h2>Generated Link</h2>
            <div id="generatedLink"></div>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>